'use client'

import React from 'react';
import { useDraggable } from '@dnd-kit/core';

interface ComponentItem {
  id: string;
  name: string;
  type: 'timeline' | 'marquee' | 'image' | 'carousel' | 'video' | 'iframe' | 'news-list';
  icon: string;
  description: string;
}

const components: ComponentItem[] = [
  {
    id: 'timeline',
    name: '时间轴组件',
    type: 'timeline',
    icon: '📅',
    description: '具有互动点的时间轴显示'
  },
  {
    id: 'marquee',
    name: '图片跑马灯',
    type: 'marquee',
    icon: '🎞️',
    description: '滚动图片轮播'
  },
  {
    id: 'image',
    name: '图片显示',
    type: 'image',
    icon: '🖼️',
    description: '单一图片显示组件'
  },
  {
    id: 'carousel',
    name: '媒体轮播',
    type: 'carousel',
    icon: '🎠',
    description: '具有自动播放的互动媒体轮播'
  },
  {
    id: 'video',
    name: '影片播放器',
    type: 'video',
    icon: '🎥',
    description: '影片播放组件'
  },
  {
    id: 'iframe',
    name: '网页嵌入',
    type: 'iframe',
    icon: '🌐',
    description: '嵌入外部网页或应用'
  },
  {
    id: 'news-list',
    name: '新闻列表',
    type: 'news-list',
    icon: '📰',
    description: '新闻列表组件'
  }
];

interface DraggableComponentProps {
  component: ComponentItem;
}

function DraggableComponent({ component }: DraggableComponentProps) {
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
    id: component.id,
    data: {
      type: component.type,
      component
    }
  });

  const style = transform ? {
    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
  } : undefined;

  return (
    <div
      ref={setNodeRef}
      style={style}
      {...listeners}
      {...attributes}
      className={`
        p-4 bg-white border border-gray-200 rounded-lg shadow-sm cursor-grab
        hover:shadow-md transition-shadow duration-200
        ${isDragging ? 'opacity-50' : ''}
      `}
    >
      <div className="flex items-center space-x-3">
        <span className="text-2xl">{component.icon}</span>
        <div>
          <h3 className="font-medium text-gray-900">{component.name}</h3>
          <p className="text-sm text-gray-500">{component.description}</p>
        </div>
      </div>
    </div>
  );
}

export default function ComponentLibrary() {
  return (
    <div className="w-[340px] bg-gray-50 p-6 border-r border-gray-200">
      <div className="space-y-4">
        {components.map((component) => (
          <DraggableComponent key={component.id} component={component} />
        ))}
      </div>

      <div className="mt-8 p-4 bg-blue-50 rounded-lg">
        <h3 className="font-medium text-blue-900 mb-2">使用说明：</h3>
        <ul className="text-sm text-blue-800 space-y-1">
          <li>• 将组件拖拽到画布</li>
          <li>• 拖拽控制杆重新排序</li>
          <li>• 点击「编辑」配置属性</li>
          <li>• 使用「预览」查看最终结果</li>
          <li>• 导出/导入您的配置</li>
        </ul>
      </div>
    </div>
  );
}